import { Box, Card, Grid, Typography } from '@mui/material';
import { useEffect, useState } from 'react';

import DisbursementManager from '../../api/disbursement/disbursement-manager';
import DisbursementType, {
    getIconByID,
    getNameByID
} from '../../api/disbursement/disbursement-type';
import PayrollGroup from '../../api/payroll-group/payroll-group';
import NumberTool from '../../libs/number-tool';
import PayrollGroupMenu from './payroll-group-menu';

interface Props {
    payrollGroup: PayrollGroup;
}

const PayrollGroupHeader = (props: Props) => {
    const [types, setTypes] = useState<Array<DisbursementType>>([]);
    const [payrollGroup, setPayrollGroup] = useState<PayrollGroup>(props.payrollGroup);

    useEffect(() => {
        DisbursementManager.getTypes().then((types: Array<DisbursementType>) => {
            setTypes(types);
        });
    }, []);

    useEffect(() => {
        setPayrollGroup(props.payrollGroup);
    }, [props.payrollGroup]);

    const onEditPayrollGroup = (payrollGroup: PayrollGroup) => {
        setPayrollGroup(payrollGroup);
    };

    const getDivider = () => {
        return (
            <Box
                sx={{
                    marginTop: '5px',
                    marginLeft: '-1px',
                    width: '0.5px',
                    height: '70px',
                    background: '#555178'
                }}
            />
        );
    };

    return (
        <Card
            sx={{
                background: '#0B0821',
                padding: 5
            }}
        >
            <Grid container>
                <Grid item xs={2}>
                    <Box
                        component="img"
                        sx={{
                            width: '180px',
                            height: '180px'
                        }}
                        alt="Group Icon"
                        src={'/group.png'}
                    />
                </Grid>

                <Grid item xs={10}>
                    <Typography variant="h2">{payrollGroup && payrollGroup.name}</Typography>

                    <Box className="d-flex justify-content-between">
                        <Box sx={{ color: '#FFBB59' }}>
                            Game:
                            <Box
                                component="img"
                                sx={{
                                    height: 20,
                                    width: 20,
                                    marginLeft: '5px',
                                    marginRight: '5px'
                                }}
                                alt="Icon"
                                src={getIconByID(types, payrollGroup?.disbursementType)}
                            />
                            {getNameByID(types, payrollGroup?.disbursementType)}
                        </Box>

                        <PayrollGroupMenu
                            payrollGroup={payrollGroup}
                            onEditPayrollGroup={onEditPayrollGroup}
                        />
                    </Box>

                    <Grid container sx={{ marginTop: 4 }}>
                        <Grid item xs={3}>
                            <Typography
                                sx={{ fontSize: 12, color: '#B3AFD4', pb: 1 }}
                                align="center"
                            >
                                MEMBERS
                            </Typography>

                            <Typography variant="h2" align="center">
                                {payrollGroup?.numberOfMembers}
                            </Typography>
                        </Grid>

                        {getDivider()}

                        <Grid item xs={3}>
                            <Typography
                                sx={{ fontSize: 12, color: '#B3AFD4', pb: 1 }}
                                align="center"
                            >
                                MONTHY PAYOUT DATES
                            </Typography>

                            <Typography variant="h2" align="center">
                                {payrollGroup?.payoutSchedules?.join(', ')}
                            </Typography>
                        </Grid>

                        {getDivider()}

                        <Grid item xs={3}>
                            <Typography
                                sx={{ fontSize: 12, color: '#B3AFD4', pb: 1 }}
                                align="center"
                            >
                                MEMBER SHARE
                            </Typography>

                            <Typography variant="h2" align="center">
                                {payrollGroup?.memberShare}%
                            </Typography>
                        </Grid>

                        {getDivider()}

                        <Grid item xs={3}>
                            <Typography
                                sx={{ fontSize: 12, color: '#B3AFD4', pb: 1 }}
                                align="center"
                            >
                                MINIMUM PAYOUT AMOUNT
                            </Typography>

                            <Typography variant="h2" align="center">
                                {NumberTool.format(
                                    payrollGroup?.minimumPayoutAmount,
                                    payrollGroup?.currency,
                                    2
                                )}{' '}
                                {payrollGroup?.currency}
                            </Typography>
                        </Grid>
                    </Grid>
                </Grid>
            </Grid>
        </Card>
    );
};

export default PayrollGroupHeader;
